<template>
	<img src="@/assets/images/bg1.png" style="height: 260px;object-fit: contain;" alt="">
	<!-- 学习记录 -->
	<div class="choiceness">
		<div class="page_content">
			<div class="card_w">
				<div class="week">本周学习<text>{{ myLearn.itemCount }}</text>节课</div>
				<div class="study_detail df ac">
					<div class="_item">
						<div class="num">{{ myLearn.learnTime }}</div>
						<div class="tl">学习时长（分钟）</div>
					</div>
					<div class="_item">
						<div class="num">{{ myLearn.finishCount }}</div>
						<div class="tl">完成课程</div>
					</div>
					<div class="_item">
						<div class="num">0</div>
						<div class="tl">课程评论</div>
					</div>
				</div>
			</div>
			<div class="top_tab df ac">
				<img src="@/assets/images/study.png" alt=""> 学习记录
			</div>
			<template v-if="mylist.length > 0">
				<!-- <template v-if="true"> -->
				<div class="df ffrw">
					<xy-course-item v-for="item in mylist" :item="item" :key="item.id"></xy-course-item>
				</div>
				<div class="page df jc">
					<el-pagination background :pager-count="11" ayout="prev, pager, next" :default-page-size="limit"
						@current-change="oncurrentChange" :total="total" class="mt-4" />
				</div>
			</template>
			<template v-else>
				<xy-empty></xy-empty>
			</template>
		</div>
	</div>
</template>

<script setup lang="ts">
import api from '@/api/api';
//组件命名-----
defineOptions({ name: "study-index" })
// 我的学习记录
const mylist = ref<any>([])
const myLearn = ref<any>({})
const total = ref(0)
const limit = ref(8)
const page = ref(1)
onMounted(() => {
	MyCourseList()
	MyLearnCount()
})
const MyCourseList = async () => {
	const res = await api.MyCourseList_API({ limit: limit.value, page: page.value })
	if (res.code == 0) {
		mylist.value = res.data.data
		total.value = res.data.total
	}
}
const MyLearnCount = async () => {
	const res = await api.MyLearnCount_API({ "type": 1 })
	if (res.code == 0) {
		myLearn.value = res.data
	}
}
const oncurrentChange = (e) => {
	console.log("🚀 ~ oncurrentChange ~ e:", e)
	page.value = e
	MyCourseList()
}


</script>

<style lang="scss" scoped>
.choiceness {
	padding-bottom: 30px;
	position: relative;

	.card_w {
		position: absolute;
		width: 1200px;
		top: -260px;
	}

	.week {
		font-size: 32px;
		font-weight: bold;
		padding: 70px 0;

		text {
			color: $ecolor;
			font-size: 38px;
			font-style: italic;
			padding: 0 5px;
		}
	}

	.study_detail {
		border: 1px solid $dcolor;
		background-color: $white;

		._item {
			flex: 1;
			text-align: center;
			margin: 34px 0;

			&:nth-child(2) {
				border-left: 1px solid $dcolor;
			}

			&:nth-child(2) {
				border-right: 1px solid $dcolor;
			}

			.num {
				font-size: 26px;
				margin-bottom: 5px;
				color: $ecolor;
			}

			.tl {
				font-size: 16px;
				color: #979797;
			}
		}
	}
}

.top_tab {
	padding: 90px 0 30px 0;
	font-size: 24px;

	img {
		width: 26px;
		object-fit: contain;
		height: 24px;
		margin-right: 10px;
	}
}
</style>
